<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Orinoco Web</title>
<link href="Estilo/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript/jquery-1.7.1.min.js" ></script>
<script language="javascript">
$(document).ready(function(){
	$('#a_loginbox').click(function(){
		hideElements(['#loginbox']);
		$('#loginbox').toggle();
		return false;
	});
	$('#a_registerbox').click(function(){
		hideElements(['#registerbox']);
		$('#registerbox').toggle();
		return false;
	});
	$('#a_descriptionbox').click(function(){
		hideElements(['#descriptionbox']);
		$('#descriptionbox').toggle();
		return false;
	});
	$('#a_participantsbox').click(function(){
		hideElements(['#participantsbox']);
		$('#participantsbox').toggle();
		return false;
	});
	$('#a_docbox').click(function(){
		hideElements(['#docbox']);
		$('#docbox').toggle();
		return false;
	});
});
/* Hides all elements 'hideable'
Also, if specified, can exclude
elements in 'notHide' from hiding */
function hideElements(notHide){
	var ElemToHide = ['#loginbox','#registerbox',
	'#descriptionbox','#participantsbox','#docbox'];
	if (arguments.length == 0){
		$.each(ElemToHide,function(index,value){
			$(value).hide();
		});
		return true;
	}
	$.each(ElemToHide,function(index,value){
		if ($.inArray(value,notHide) == -1){
			$(value).hide();
		}
	});
	return true;
}
</script>
</head>

<body>
<div id="mainbox">
	<div id="first">
        <img src="Imagenes/logo/logo_title.png" id="logo"/>
        <div id="optionbox">
            What do you want to do?
            <a href="#" id="a_loginbox">LOGIN</a>
            <a href="#" id="a_registerbox">REGISTER</a>
        </div>
    </div>
    <div id="loginbox">
    	<form action="login.php" method="post">
        <fieldset>
        <legend>LOGIN</legend>
        <div>
        <label for="form_user">Username: </label><input type="text" id="form_user"/><br/>
        <label for="form_password">Password: </label><input type="password" id="form_password"/>
        </div>
        <input type="submit" value="Log me in" id="button_access" />
        </fieldset>
        </form>
    </div>
    <div id="registerbox">
        <form action="register.php" method="post">
        <fieldset>
        <legend>REGISTER</legend>
        <ul>
        <li><label for="form_user">Username: </label><input type="text" id="form_user"/></li>
        <li><label for="form_institution">Institution: </label><input type="text" id="form_institution"/></li>
        </ul>
        <ul>
        <li><label for="form_password">Password: </label><input type="password" id="form_password"/></li>
        <li><label for="form_password2">Confirm Password: </label><input type="password" id="form_password2"/></li>
        </ul>
         <ul>
        <li><label for="form_names">Names: </label><input type="text" id="form_names"/></li>
        <li><label for="form_lastnames">Last Names: </label><input type="text" id="form_lastnames"/></li>
        </ul>
        <ul>
         <li><label for="form_email">Email: </label><input type="text" id="form_email"/></li>
        <li><label for="form_email2">Confirm Email: </label><input type="text" id="form_email2"/></li>
        </ul>
        <input id="button_register" type="submit" value="Register me"/>
        </fieldset>
        </form>
    </div>
    <div id="briefdescriptionbox">
    	Orinoco is project about developing strategies of discovering and compounding web services, in order to create efficient workflows for those platforms which contain a great number of available services. Orinoco Web is an extension of the original project, making its use visible to the web.
    </div>
    <div id="moreinfobar">
    	If you want to know more about 'Orinoco Project', click
        on sections below.
    </div>
    <div id="sectionbox">
    	<ul>
        	<li>
            	<a href="#" id="a_descriptionbox">Description</a>
            </li>
            <li>
            	<a href="#" id="a_participantsbox">Participants</a>
            </li>
            <li>
            	<a href="#" id="a_docbox">Documentation</a>
            </li>
        </ul>
    </div>
    <div id="descriptionbox">
    	Here goes the project's description.
    </div>
    <div id="participantsbox">   
        <div id="universities"> 
            <p>UNIVERSITIES</p>	
            <img src="Imagenes/logo/usb.jpg"/>
            <img src="Imagenes/logo/nanterre.png"/>
            <img src="Imagenes/logo/dauphine.jpg"/>
            <p>Yudith Cardinale, Eduardo Blanco, María Esther Vidal, Keysis Kiss, Rafael Angarita, David Zaragoza</p>
        </div>
        <div id="sponsors">
        <img src="Imagenes/logo/didusb.png"/>
        <img src="Imagenes/logo/fonacit.jpg"/>
        <img src="Imagenes/logo/cnrs.jpg"/>
        <p>SPONSORS</p>
        </div>
    </div>
    <div id="docbox">
    	Here you can find some documentation of the project, including the source code.<br/><br/>
        <a href="/docs/orinoco_book.pdf">Orinoco Book</a><br/>
        <a href="/docs/french_descriptionproject.pdf">Project Description - French</a><br/>
        <a href="/docs/spanish_descriptionproject.pdf">Project Description - Spanish</a><br/>
        <a href="/docs/source.tar.gz">Source Code (130 MB)</a><br/>
    </div>
</div>
<div id="footer">
	<div id="footer_sponsors">
	<img src="Imagenes/logo/didusb.png"/>
    <img src="Imagenes/logo/fonacit.jpg"/>
    <img src="Imagenes/logo/cnrs.jpg"/>
    <p>SPONSORS</p>
    </div>
    <div id="footer_universities">
    <img src="Imagenes/logo/usb.jpg"/>
    <img src="Imagenes/logo/nanterre.png"/>
    <img src="Imagenes/logo/dauphine.jpg"/>
    <p>UNIVERSITIES</p>
    </div>
</div>
</body>
</html>
